<template>
  <view class="login ldBg">
    <view class="login-logo">
      <image src="/static/logo.png?v1"></image>
    </view>
    <view class="my_head_img">
      <!-- <image src="/static/1.jpg" mode="aspectFill" /> -->
      <view class="bgContent">
        <view class="title"> {{title}} </view>
      </view>
    </view>
    <view class="titleContent">
    </view>
    <view class="loginConten ldBg">
      <uni-forms
        ref="formRef"
        :model="form"
        :rules="formRules"
        class="loginForm"
      >
        <uni-forms-item name="loginName">
          <uni-easyinput
            v-model="form.loginName"
            prefixIcon="person"
            :focus="false"
            placeholder="请输入您的身份证号"
          />
        </uni-forms-item>
        <uni-forms-item name="pwd">
          <uni-easyinput
            v-model="form.pwd"
            type="password"
            prefixIcon="locked"
            placeholder="请输入您的密码"
          />
        </uni-forms-item>
      </uni-forms>
      <button class="uni-btn" type="primary" @click="login">立即登陆</button>
    </view>

    <view class="footer" @click="tShow">
      © 2024 陕北矿业有限公司信息技术运维分公司&nbsp;<span>运维支持</span>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import http from "@/utils/request";
import { useUserStore } from "@/stores/user";
import { useDictStore } from "@/stores/dict";

// 定义变量
const isPC = ref(false);
const type = ref("center");
const message = ref();
const userStore = useUserStore();
const entName = ref(""); // 系统名称
const form = reactive({
  // 表单
  loginName: "", // 账号
  pwd: "", // 密码
});
const formRef = ref(); // 表单引用
const formRules = {
  // 表单校验规则
  loginName: {
    rules: [{ required: true, errorMessage: "请输入账号" }],
  },
  pwd: {
    rules: [
      { required: true, errorMessage: "请输入密码" },
      {
        pattern:
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-.])[A-Za-z\d$@#!%^*?&+-.]{8,}/,
        errorMessage: "密码应当至少8位且含有数字、大小写字母及特殊字符",
      },
    ],
  },
};
const title = ref("");
// 页面加载完毕，执行如下方法
onLoad(async () => {
  form.loginName = localStorage.getItem("loginName");
  form.pwd = localStorage.getItem("pwd");
  uni.getSystemInfo({
    success: function (res) {
      if (
        res.platform === "devtools" ||
        res.platform === "mac" ||
        res.platform === "windows"
      ) {
        isPC.value = true;
      }
    },
  });
  //如果是pc，弹窗不许使用
  if (isPC.value) {
    uni.showModal({
      title: "提示",
      content: "请使用手机端访问",
      showCancel: false,
    });
  }
  title.value = window.server.title
});

// 登录
async function login() {
  if (isPC.value) {
    uni.showModal({
      title: "提示",
      content: "请使用手机端访问",
      showCancel: false,
    });
    return;
  }
  // 数据校验
  let validate = await formRef.value
    .validate()
    .then(() => true)
    .catch(() => false);
  if (!validate) {
    return;
  }

  // 用户登录
  let { code, data } = await http.post("login/in", { ...form }, {});
  if (code != 200) {
    return;
  }

  // 令牌缓存
  userStore.id = data.userId;
  userStore.name = data.userName;
  userStore.phone = data.phone;
  userStore.orgName = data.orgName;
  userStore.roles = data.roles;
  userStore.accessToken = data.accessToken;
  if (form.pwd == "Sbky@888") {
      userStore.isInit = true;
  }

  localStorage.setItem("loginName",form.loginName)
  localStorage.setItem("pwd",form.pwd)

  // 数据字典缓存
  let {
    data: { list },
  } = await http.post("dict/listpage", { pageSize: 100 });
  const dictStore = useDictStore();
  dictStore.dicts = list;

  // 跳转到首页
  uni.switchTab({ url: "/pages/index/index" });

}
const tShow = () => {
  uni.previewImage({
  	urls: ['../../static/concact.png'], // 图片地址列表
  	current: '../../static/concact.png' // 当前显示图片的链接
  });
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 100%;

  .my_head_img {
    position: relative;
    width: 100%;
    height: 520rpx;
    .bgContent {
      height: 520rpx;
      width: 100%;
      background: linear-gradient(to right, #24b0fb, #1c90fa);
    }
    .title {
      text-align: center;
      line-height: 380rpx;
      font-size: 65rpx;
      color: #fff;
      font-weight: 800;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
	  transform: scale(0.9, 1);
    }
  }
  :deep(.is-input-border) {
    border: initial;
    border-bottom: 1rpx solid #f0f0f0;
    border-radius: 0rpx;
  }
  :deep .uni-btn {
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    border-color: #24b0fb;
    font-weight: bold;
    margin-bottom: 40rpx;
    border-radius: 12px;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
  }
  :deep .uni-btn[type="primary"]:not([hover-class]):active {
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    border-color: #24b0fb;
  }

  .login-logo {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 3vh;
    image {
      width: 160rpx;
      height: 30rpx;
      margin-left: 2%;
    }

    uni-text {
      padding-left: 20rpx;
      font-size: 20px;
      // font-weight: bold;
    }
  }
}
.loginForm {
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  :deep .uni-easyinput__placeholder-class {
    font-size: 36rpx;
    color: #333;
  }
  :deep .uni-forms-item {
    margin-bottom: 40rpx;
  }
  :deep .uni-easyinput__content-input {
    height: 100rpx;
  }
  :deep .uni-input-input {
    font-size: 36rpx;
  }
}
.titleContent {
  display: flex;
  flex-direction: column;
  margin-top: -240rpx;
  z-index: 9;
  color: #fff;
  margin-bottom: 80rpx;
  margin-left: 26rpx;
  .loginTitle {
    margin-top: 20rpx;
    font-size: 22px;
  }
}
.loginConten {
  /* 卡片圆角 阴影效果*/
  height: 660rpx;
  width: 70%;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  padding-bottom: 70rpx;
  padding-top: 40rpx;
  margin-top: 0rpx;
  z-index: 9;
  :deep .loginForm {
    .uni-forms-item.is-direction-top {
      height: 150rpx;
    }
  }
}

.footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: fixed; /* 或 absolute，取决于你的布局需要 */
  bottom: 50rpx; /* 使其固定在底部 */
  left: 0;
  right: 0;
  height: 50rpx; /* 设置底部容器的高度 */
  font-size: 24rpx;
  color: #333;
  span {
    color: #24b0fb;
  }
}
</style>